<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/ui.xhtml">

	<ui:define name="title">
		<h:outputText value="Inicio" />
	</ui:define>
	<ui:define name="sidebar">
		<div class="widget">
			<div class="title">
				<div class="inner">
					<h3>
						<h:outputText value="Menú" />
					</h3>
				</div>
			</div>
			
			<!-- MENU PERFIL ADMINISTADOR -->
			
			<!--<ui:include src="menu__sidebar.xhtml" />-->
			<ui:include src="menu.xhtml" />
		</div>
	</ui:define>
	<ui:define name="content">
<!-- 	<c:if test="${loginService.usuario.perfilId == 1 || loginService.usuario.perfilId == 2 || loginService.usuario.perfilId == 4}"> -->
		<div class="page-header">
			<h3>
				<h:outputText value="Panel de Control" />
			</h3>
		</div>
		<div class="subTitle">
			<ol class="breadcrumb">
				<li><a href="index.jsf"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Panel de Control</li>
			</ol>
		</div>
		<h:form>
			<p:growl id="growl" showDetail="true" />
			<div class="row">
				<div class="col-sm-6 form-group">
					<p:outputLabel for="cboCenso" value="Censo:" />
					<h:selectOneMenu styleClass="form-control" id="cboCenso" value="#{reporteService.cboCensoId}">
						<p:ajax event="change" listener="#{reporteService.listenerCenso}" 
						update="panelCenso divPenFin divDetalle panelProgressBar panelChart3 pieReporte1 divEntidad divTipoReporte " />
						<f:selectItem itemLabel="Seleccionar" itemValue="0"/>
						<f:selectItems value="#{reporteService.listaCenso}"></f:selectItems>
					</h:selectOneMenu>
				</div>
				<p:panel id="divTipoReporte">
				<p:panel id="panelTipoReporte" rendered="#{!(empty reporteService.cboCensoId) and reporteService.cboCensoId ne '0'}">
				<div class="col-sm-6 form-group">
					<p:outputLabel for="cboTipoReporte" value="Seguimiento de:" id="lblTipoReporte"/>
					<h:selectOneMenu id="cboTipoReporte" value="#{reporteService.cboTipoReporte}"
						styleClass="form-control" >
						<p:ajax event="change" listener="#{reporteService.listenerTipoReporte}" 
							update="panelProgressBar panelChart3 pieReporte1 divDetalle divPenFin panelCenso" />	
						<f:selectItem itemLabel="Seleccionar" itemValue="" noSelectionOption="true" />
						<f:selectItem itemLabel="Registro de Directivos" itemValue="RESPONSABLE" />
						<f:selectItem itemLabel="Censo de Directivos" itemValue="DIRECTIVO" />
					</h:selectOneMenu>
				</div>
				</p:panel>
				</p:panel>
			</div>
			<p:panel id="divEntidad">
				<p:panel id="panelEntidad" rendered="${!(empty reporteService.cboCensoId) and reporteService.cboCensoId ne '0'}">
				<div class="row">
					<div class="col-sm-6 form-group">
						<p:outputLabel for="cboEntidad" value="Entidad:" />
						<h:selectOneMenu styleClass="form-control" id="cboEntidad" value="#{reporteService.cboEntidadId}" >		
							<p:ajax event="change" listener="#{reporteService.listenerEntidad}" 
							
							update="panelProgressBar panelChart3 pieReporte1 divDetalle divPenFin" />	
							<f:selectItem itemLabel="Todos" itemValue="0" noSelectionOption="true"/>
							<f:selectItems value="#{reporteService.listaEntidades}"
									var="entidad" itemLabel="#{entidad.nombre}"
									itemValue="#{entidad.id}" />
						</h:selectOneMenu>
					</div>
				</div>
				</p:panel>
			</p:panel>
			
			<p:panel id="panelCenso">
				<p:panel id="censo" rendered="#{!(empty reporteService.cboCensoId) and reporteService.cboCensoId ne '0'}">
				<hr />
				<h3><u>Detalle del Censo</u></h3>
				<div class="row">
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Nombre:" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-3 form-group">									
						<h:outputText value="#{reporteService.censo.censo}" />
					</div>
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Periodo:" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-3 form-group">
						#{reporteService.censo.fechaInicio} - #{reporteService.censo.fechaFin} 
					</div>
				</div>
				<div class="row">
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Abreviación" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-3 form-group">
						<h:outputText value="#{reporteService.censo.censoAbreviatura}"/>
					</div>
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Periodo Registro Directivos:" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-3 form-group">									
						#{reporteService.censo.fechaInicioHabilitacion} - #{reporteService.censo.fechaFinHabilitacion}
					</div>
				</div>
				<div class="row">
					<div class="col-sm-2 form-group">
						
					</div>
					<div class="col-sm-3 form-group">
						
					</div>
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Periodo Censo Directivos:" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-3 form-group">									
						#{reporteService.censo.fechaInicioRegistro} - #{reporteService.censo.fechaFinRegistro}
					</div>
				</div>
				<div class="row">
				 	<p:commandButton value="Exportar Registradores" ajax="false" styleClass="btn btn-success" 
				 	icon="fa fa-file-pdf-o" iconPos="right" action="#{reporteService.exportaResponsables}"
				 	rendered="#{reporteService.cboTipoReporte eq 'RESPONSABLE'}"/>
				 	<p:commandButton value="Exportar Directivos" ajax="false" styleClass="btn btn-success" 
				 	icon="fa fa-file-excel-o" iconPos="right" action="#{reporteService.exportaDirectivos}"
				 	rendered="#{reporteService.cboTipoReporte eq 'DIRECTIVO'}"/>
				 	</div>
				</p:panel>
			</p:panel>
			
			<p:panel id="divDetalle" for="divDetalle" style="#{reporteService.cboEntidadId eq '0'?'display:none':'display:block'}" >
				<hr />
			<!-- <p:fieldset legend="Detalle de la Entidad" toggleable="true" toggleSpeed="500" styleClass="ui-widget-content ui-corner-all"> -->
        	<!-- <p:ajax event="toggle" listener="#{fieldsetView.handleToggle}" update="msgs" />-->
        		<h3><u>Detalle del Registrador de la Entidad</u></h3>
				<div class="row">
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Apellidos y Nombres:" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-4 form-group">
						${reporteService.lblApellidos},&nbsp;${reporteService.lblNombres}
					</div>			
				</div>
				<div class="row">
					<div class="col-sm-2 form-group">
						<p:outputLabel value="Estado del Registrador:" style="font-weight: bold;"/>
					</div>
					<div class="col-sm-4 form-group">
						<p:outputLabel value="#{reporteService.lblEstadoResponsable}" id="lblEstadoResponsable" />
					</div>					
				</div>
			</p:panel>
			
			<p:panel id="panelProgressBar">
				<p:panel rendered="#{!(empty reporteService.cboTipoReporte) and !(empty reporteService.cboCensoId)}">
				<hr />
				<h:outputText class="jqplot-title" value="Porcentaje de Avance de Registro de Directivos" rendered="#{reporteService.cboTipoReporte eq 'RESPONSABLE'}" />
				<h:outputText class="jqplot-title" value="Porcentaje de Avance de Censo de Directivos" rendered="#{reporteService.cboTipoReporte eq 'DIRECTIVO'}" />
				<p:progressBar id="pb1"	style="#{empty reporteService.cboTipoReporte?'display:none':'display:block'}"			
					widgetVar="pbAjax" ajax="true" value="#{reporteService.pbValue}" 
					labelTemplate="#{reporteService.pbValue}%" styleClass="animated" global="false"	>
				</p:progressBar>
				</p:panel>
			</p:panel>
			
			<p:panel id="divPenFin" for="divPenFin" >
				<p:panel rendered="#{!(empty reporteService.cboTipoReporte) and !(empty reporteService.cboCensoId)}">
				 	<hr />
				 	<div class="row">
				 	<p:commandButton value="Exportar DashBoard a PDF" ajax="false" styleClass="btn btn-success" 
				 	icon="fa fa-file-pdf-o" iconPos="right" action="#{reporteService.exportaDashboard('PDF')}"/>
				 	&nbsp;
				 	<p:commandButton value="Exportar DashBoard a Excel" ajax="false" styleClass="btn btn-success" 
				 	icon="fa fa-file-excel-o" iconPos="right" action="#{reporteService.exportaDashboard('XLSX')}"/>
				 	</div>
					<div class="row">
						<div class="col-sm-6 form-group" >
							<p:outputLabel value="#{reporteService.cboTipoReporte eq 'RESPONSABLE'?'Total Registradores':'Total Censados'}:" style="font-weight: bold;"/>
							&nbsp;&nbsp;
							<p:outputLabel value="#{reporteService.lblsumaPenFin}" id="lblsumaPenFin" />
						</div> 
					</div>
					<div class="row">
						<div class="col-sm-6 form-group">
							<p:chart type="bar" id="barReporte2" model="#{reporteService.horizontalBarModel2}" 
							widgetVar="reportePendientes"
							rendered="#{reporteService.listaReportesPendiente.size() > 0}"
							style="height: 200px;">
								<p:ajax event="itemSelect" listener="#{reporteService.itemSelect}" />
							</p:chart>
							<div class="text-center">
								<p:commandButton id="enviaCorreoMasivoR" styleClass="btn btn-success" 
								value="Enviar notificación" icon="fa fa-envelope-o" iconPos="right"
								actionListener="#{reporteService.notifica}" 
								update="growl"
								rendered="#{reporteService.cboTipoReporte eq 'RESPONSABLE'}" widgetVar="bEnviaCorreoR"> 
									<p:confirm header="Confirmación" message="¿Está seguro de enviar notificación a los Registradores con estado PENDIENTE?" icon="ui-icon-alert" />
								</p:commandButton>
								<p:commandButton id="enviaCorreoMasivoD" styleClass="btn btn-success" 
								value="Enviar notificación" icon="fa fa-envelope-o" iconPos="right" 
								actionListener="#{reporteService.notifica}" 
								update="growl"
								rendered="#{reporteService.cboTipoReporte eq 'DIRECTIVO'}" widgetVar="bEnviaCorreoD"> 
									<p:confirm header="Confirmación" message="¿Está seguro de enviar notificación a los Directivos con estado PENDIENTE?" icon="ui-icon-alert" />
								</p:commandButton>
							</div>
						</div>
						<div class="col-sm-6 form-group" >
							<!-- <p:chart type="pie" id="pieReporte1" model="#{reporteService.pieModel}"  -->
							<p:chart type="bar" id="pieReporte1" model="#{reporteService.pieModel}" seriesColors="AAAAAA,2288AA"
							rendered="#{reporteService.listaReportesTrazabilidad.size() > 0}"
							style="#{empty reporteService.cboTipoReporte?'display:none':'display:block; height:500px;'}" />
						</div>
					</div>
				</p:panel>
			</p:panel>
			
			<p:panel id="panelChart3">
				<p:panel rendered="#{reporteService.cboEntidadId eq '0' and !(empty reporteService.cboTipoReporte)}">
					<hr />
					<div class="row">				
						<!-- <div class="col-sm-6 form-group">
							<p:chart type="bar" model="#{reporteService.barModel}" style="height:100%"/>	
						</div> -->		
						<div class="col-sm-12 form-group">
							<p:chart type="bar" id="barReporte1" model="#{reporteService.horizontalBarModel}"
							rendered="#{reporteService.listaReportesAvance.size() > 0}"
							style="#{empty reporteService.cboTipoReporte?'display:none':'display:block; height:500px;'}"/>
						</div>		
					</div>
				</p:panel>
			</p:panel>
		</h:form>
		<p:confirmDialog global="true" showEffect="fade" widgetVar="mensaje" closeOnEscape="true">
	        <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
	        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
	    </p:confirmDialog>
	</ui:define>
	<ui:define name="script">
	</ui:define>
</ui:composition>